<template>
  <div class="myLogin">
    <van-nav-bar
      title="面经登录"
    />
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        
        placeholder="请输入用户名"
        required 
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="请输入密码"
        required
      />
      <div style="margin: 16px;">
        <van-button  block type="warning" @click="onSubmit">提交</van-button>
      </div>
    <div class="zhuce">
      
      <router-link to="/signin">注册账号</router-link>
    </div>
  </div>
</template>

<script>
import myAxios from '@/interceptors'

import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
export default {
    name: 'MyLogin',
    data() {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
      blur(){
        if(this.$refs.username.value == ''){
          this.$refs.username['error-message'] = '用户名不能为空'
        }
      },
        onSubmit() {
        
        // const {data:{data:row}} = await axios.post('http://interview-api-t.itheima.net/h5/user/login', { username: this.username, password: this.password })
        // console.log(row);
        if(this.username ===''){
          Toast.fail('请输入账号');
          return
        }

        if(this.password ===''){
          Toast.fail('请输入密码');
          return
        }

        if(this.username.length <6 || this.password.length <6 ){
          Toast.fail('账号或密码长度不够');
          return
        }
        myAxios.post('h5/user/login', { username: this.username, password: this.password }).then(res => {
          const {data:row} = res
          const token = row.token
          localStorage.setItem('token', token)
          console.log('登录成功');
          // console.log(this.$route);
          

          if(this.$route.path !== '/main/mianjing/tuiJian'){
            this.$router.push('/main/mianjing/tuiJian')
          }
        }).catch(err => {
          if (err.status === 400) {
            console.log(err);
            alert('登录失败,账号密码错误')
            return
          }
        })
        
        

        // const token = row.token
        // if(row.status !== 'ok'){
        //   alert('登录失败,账号密码错误')
        //   return
        // }
        // localStorage.setItem('token', token)
      }
    }
}
</script>

<style scoped>
    .zhuce{
        text-align: right;
        padding-right: 30px;
    }
</style>